﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>显示地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=v1HSNrafV1En2G31ctO1IwTS&v=1.0"></script>
    <style type="text/css">
        body, html, #map_weather
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        /* 自定义覆盖物的样式 */
        .my-overlay
        {
            position: absolute;
            border: solid;
            border-color: red;
            border-width: 1px;
        }
         .mytitle-overlay
        {
            position: absolute;
            border: solid;
            border-width: 2px;
        }
    </style>
</head>
<body>
    <div id="map_weather"></div>
    
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("map_weather"); //创建MAP实例
    var point = new BMap.Point(119.90, 29.45);
    map.centerAndZoom(point, 14); //初始化地图，设置中心坐标和地图级别
    map.addControl(new BMap.ZoomControl());          //添加地图缩放控件
    //添加地图标注信息
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    //创建信息窗口
    var opts = {
        width: 200,
        height: 70,
        title: "气象信息"
    };
    var content = "<span>气温：22.0℃<br/>发布时间：2014-07-06</span>";
    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
    //map.openInfoWindow(infoWindow, point); //开启信息窗口
    marker.addEventListener("click", function () { this.openInfoWindow(infoWindow, point); });


    //自定义方形覆盖物
    function SquareOverlay(point, width, height, className, content) {
        this._point = point;
        this._width = width;
        this._height = height;
        this._className = className;
        this._content = content;
    }
    // 继承API的BMap.Overlay      
    SquareOverlay.prototype = new BMap.Overlay();
    // 实现初始化方法
    SquareOverlay.prototype.initialize = function (map) {
        // 保存map对象实例     
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器     
        var div = document.createElement("div");
        // 可以根据参数设置元素外观
        div.className = this._className;
        div.style.width = this._width + "px";
        div.style.height = this._height + "px";
        div.innerHTML = this._content;
        // 将div添加到覆盖物容器中     
        map.getPanes().markerPane.appendChild(div);
        // 保存div实例     
        this._div = div;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、     
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。     
        return div;
    };
    // 实现绘制方法
    SquareOverlay.prototype.draw = function () {
        // 根据地理坐标转换为像素坐标，并设置给容器      
        var position = this._map.pointToOverlayPixel(this._point);
        this._div.style.left = position.x - this._width / 2 + "px";
        this._div.style.top = position.y - this._height / 2 + "px";
    };
    // 实现显示方法
    SquareOverlay.prototype.show = function () {
        if (this._div) {
            this._div.style.display = "";
        }
    };
    // 实现隐藏方法
    SquareOverlay.prototype.hide = function () {
        if (this._div) {
            this._div.style.display = "none";
        }
    };

    // 添加自定义覆盖物     
    var point1 = new BMap.Point(119.95, 29.48);
    var mySquare = new SquareOverlay(point, 80, 20, "my-overlay", "<span style='font-size: 10px;'>测试内容</span>");
    map.addOverlay(mySquare);
    map.addOverlay(new SquareOverlay(map.getCenter(), 100, 50, "mytitle-overlay", "<span style='font-size: 10px;'>气温最新实况<br/>详情点击红色符号</span>"));
</script>
